<template>
  <div class="course-wrap">
    <div class="main-content">
        <div class="">
          <div class="all" :data-s="courseTab">
            <div
                    v-for="router in courseList.course"
                    :key="router.id"
                    :id="`yxp_homeNav${router.question_type}`"
                    class="title-item_double synclock_double"
            >
              <span class="course_title">{{router.level_title}}</span>
              <span v-if="router.course_type == 1">
                <span class="course_expire green" v-if="!router.is_expire">(有效期：{{router.expire_time}})</span>
                <span class="course_expire red" v-else>(有效期：{{router.expire_time}})</span>
              </span>
              <span v-if="router.course_type == 1">
                <div class="btn course_handle" @click="handleBtn(router.id)">续费</div>
              </span>
            </div>
          </div>
          <payqrcode v-if="isModel" @model="handleClose" :imgpath="imgpath" :order_no='order_no'/>
          <no-class v-if="isNone" />
        </div>
    </div>
  </div>
</template>
<script>
import noClass from './noClass.vue'
import { enterRoom } from "@/utils/tools";
import payqrcode from './payqrcode.vue'
import {
  fetchdoubleCourse,placeOrder
} from "@/services"
import { mapState } from "vuex";
export default {
  components: {
    payqrcode
  },
  props: {
    courseTab: {
      type: Number,
      default: 0
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  created () {
    this.getdata();
  },
  data () {
    return {
      courseList: [],
      isNone:0,
      id:'',
      imgpath:'',
      order_no:'',
      isModel:false
    }
  },
  watch: {

  },
  methods: {
    handleBtn (_id) {
      //续费
      placeOrder({
        package_id:_id
      }).then((res)=>{
        if (res.code === 1) {
        	console.log(res);
          this.imgpath = res.data.url;
          this.order_no = res.data.order_no;
          this.isModel = true;
        }
      });
    },
    handleClose (val) {
      this.isModel = val
      this.getdata()
    },
    getdata(){
      fetchdoubleCourse({
      	class_num: '',
      }).then((res) => {
      	if (res.code === 1) {
      		this.courseList = res.data;
          if(this.courseList.course.length == 0){
            this.isNone = 1;
          }
      	}else{
      		this.exitRoom();
      	}
      });
    }
  }
}
</script>
<style lang="less" scoped>
  .all{
    .title-item_double{
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #dedede;
      .course_expire{
        margin-left: 30px;
      }
      .course_handle{
        float: right;
        cursor: pointer;
      }
    }
  }
</style>
